<template>
    <div class="container">

        <div class="body_wrap">

            <el-card shadow="hover" ref="content_card">
                <!-- 搜索 -->
                <el-form ref="searchForm" :inline="true" :model="searchForm" size="medium" label-width="120px">
                    <div class="search_wrap">
                        <!-- 多条件 -->
                        <div class="search_more">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="关键字搜索：" prop="keyword">
                                        <el-input placeholder="姓名/手机号" v-model="searchForm.keyword" clearable/>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="8" v-if="!searchFlag">
                                    <el-form-item label="入住房客：" prop="keyword">
                                        <el-input placeholder="" v-model="searchForm.keyword" clearable/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" v-if="!searchFlag">
                                    <el-form-item label="订单状态1：" prop="statusIns">
                                        <el-select style="width: 100%" v-model="searchForm.statusIns" placeholder="订单状态" clearable>
                                            <el-option label="待付款" value="1"></el-option>
                                            <el-option label="待确认" value="2,4"></el-option>
                                            <el-option label="已确认" value="3"></el-option>
                                            <el-option label="已取消" value="5"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>

                    </div>

                    <!-- 工具栏 -->
                    <div class="tools_wrap">
                        <div class="action_bar_wrap">
                            <el-button @click="handleAddOrUpdateVisible()" type="primary" size="medium" icon="el-icon-plus">新增</el-button>
                            <el-button @click="handleDelete()" type="danger" size="medium" icon="el-icon-delete">删除</el-button>

                            <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                            <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>
                            <el-button type="text" size="medium" @click="searchFlag = !searchFlag">
                                高级搜索
                                <i class="el-icon--right" :class="searchFlag?'el-icon-arrow-down':'el-icon-arrow-up'"></i>
                            </el-button>
                        </div>

                        <div class="other_bar_wrap">
                            <el-tooltip content="全屏" placement="top">
                                <el-button @click="handleFullscreen('content_card')" type="text" size="medium" icon="el-icon-full-screen"></el-button>
                            </el-tooltip>
                            <el-tooltip content="刷新" placement="top">
                                <el-button @click="handleReload" type="text" size="medium" icon="el-icon-refresh-right"></el-button>
                            </el-tooltip>
                            <el-tooltip content="隔行变色" placement="top">
                                <el-button @click="stripe = !stripe" type="text" size="medium" icon="el-icon-s-grid"></el-button>
                            </el-tooltip>
                            <!-- 显示/隐藏列 -->
                            <el-tooltip content="显示/隐藏列" placement="top" class="ml10">
                                <el-popover placement="bottom-start" trigger="click">
                                    <el-button slot="reference" type="text" size="medium" icon="el-icon-s-operation"></el-button>
                                    <div class="isHideCol_wrap">
                                        <div class="title">显示/隐藏列</div>
                                        <div class="checkall">
                                            <el-checkbox v-model="checkAllCol" @change="handleCheckAllChange">全选</el-checkbox>
                                        </div>
                                    </div>
                                    <el-row>
                                        <el-col :span="8" v-for="(item, index) in columnList" :key="index" class="mb10">
                                            <el-checkbox v-model="item.show"> {{item.label}} </el-checkbox>
                                        </el-col>
                                    </el-row>
                                </el-popover>
                            </el-tooltip>
                        </div>
                    </div>
                </el-form>

                <!-- 表格 -->
                <el-table
                    ref="table"
                    size="medium"
                    empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit border highlight-current-row
                    :stripe="stripe"
                    v-loading="loadingData"
                    :data="dataList"
                    @selection-change="handleSelection">

                    <el-table-column type="selection" width="55" prop="selection" v-if="isHideColumn('selection')" align="center"></el-table-column>
                    <el-table-column label="序号" type="index" prop="index" v-if="isHideColumn('index')" width="60" align="center" />

                    <el-table-column label="酒店编号" prop="id" v-if="isHideColumn('id')" align="left" show-overflow-tooltip/>
                    <el-table-column label="上线状态" prop="status" v-if="isHideColumn('status')" align="left" show-overflow-tooltip/>
                    <el-table-column label="酒店名称" prop="name" v-if="isHideColumn('name')" align="left" show-overflow-tooltip/>
                    <el-table-column label="品牌关系" prop="brand" v-if="isHideColumn('brand')" align="left" show-overflow-tooltip/>

                    <el-table-column label="操作" prop="btn" v-if="isHideColumn('btn')" width="200px" align="left" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleAddOrUpdateVisible(scope.row.id)" type="text" size="small">编辑</el-button>
                            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                            <el-button @click="handleDrawerVisible(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchForm.page"
                            :page-sizes="[10, 20, 30, 50, 100, 200]"
                            :page-size="searchForm.limit"
                            :total="totalPage"
                            layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </el-card>

            <!-- 弹窗, 新增 / 修改 -->
            <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></AddOrUpdate>

            <!-- 右侧抽屉,详情信息 -->
            <el-drawer
                class="drawer_wrap"
                size="800px"
                title="详情-飞天遁地"
                :visible.sync="drawerVisible"
                :with-header="false"
                direction="rtl"
                :before-close="handleCloseDrawerDetail">
                <div class="header_title">详情-飞天遁地</div>

                <div class="header_body">
                    <div v-for="(index, i) in 100" :key="index">
                        <p>{{ i }}</p>
                    </div>
                </div>
            </el-drawer>


        </div>
    </div>
</template>

<script>
import AddOrUpdate from './add-or-update'
import TableMixin from '@/mixin/TableMixin'
export default {
    mixins: [TableMixin],
    components: {
        AddOrUpdate
    },

    data() {
        return {
            dataList: [],
            totalPage: 0,
            loadingData: false,
            addOrUpdateVisible: false,
            drawerVisible: false,
            selectionRows: [],
            searchFlag: true,
            searchForm: {
                page: 1,
                limit: 10,
                sortColumns: '',
                sortType: '',
                keyword: null,
            }
        }
    },

    created() {

    },

    mounted() {
        this.$nextTick(() => {
            this.getDataList()
        })
    },

    methods: {

        /**
         * 侧边栏抽屉打开
         */
        handleDrawerVisible(row) {
            this.drawerVisible = true
        },
        /**
         * 重新加载数据表格
         */
        handleReload() {
            this.getDataList()
        },
        /**
         * 重置搜索表单
         */
        handleReset() {
            this.$refs.searchForm.resetFields()
        },
        /**
         * 搜索
         */
        handleSearch() {
            this.getDataList()
        },

        /**
         * 新增或编辑
         */
        handleAddOrUpdateVisible(id) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },

        /**
         * 删除
         */
        handleDelete() {

        },


        /**
         * 获取表格数据
         */
        getDataList() {
            this.dataList = [
                {id: '12313', status: '正常', name: '香格里拉酒店', brand: '香格里拉'},
                {id: '12313', status: '正常', name: '香格里拉酒店', brand: '香格里拉'},
                {id: '12313', status: '正常', name: '香格里拉酒店', brand: '香格里拉'},
                {id: '12313', status: '正常', name: '香格里拉酒店', brand: '香格里拉'},
                {id: '12313', status: '正常', name: '香格里拉酒店', brand: '香格里拉'},
                {id: '12313', status: '正常', name: '香格里拉酒店', brand: '香格里拉'}
            ]
        }
    }

}
</script>

<style lang="scss" scoped>

</style>
